<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>欢迎来到 - 英雄联盟</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            .container {
                width: 1200px;
                margin: 0 auto;
                padding-top: 50px;
            }
            hr {
                margin: 15px auto;
            }
            .item {
                width: 10%;
                float: left;
                padding: 0 10px;
                margin-bottom: 5px;
            }
            .item img {
                width: 100%;
            }
            .item h4 {
                text-align: center;
                font-weight: normal;
            }
            .hero-list {
                margin: 0 -10px;
            }
        </style>
        <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
        <script src="https://unpkg.com/nprogress@0.2.0/nprogress.js"></script>
        <link rel="stylesheet" href="https://unpkg.com/nprogress@0.2.0/nprogress.css">
    </head>
    <body>
        <div class="container">
            <h2>英雄联盟</h2>
            <hr />
            <div>
                <button>法师</button>
                <button>战士</button>
                <button>辅助</button>
                <button>射手</button>
                <button>坦克</button>
                <button>刺客</button>
            </div>
            <hr />
            <div class="hero-list">
                <!-- <div class="item">
                <img src="https://game.gtimg.cn/images/lgamem/act/lrlib/img/HeadIcon/H_S_10001.png" alt="">
                <h4>盖伦</h4>
            </div> -->
            </div>
        </div>

        <script>

        //     NProgress.start();
        //     setTimeout(() => {
        //     NProgress.done();
        // }, 3000)

            //声明请求拦截器
            axios.interceptors.request.use(config => {
                //发送请求之前之前的准备
                NProgress.start();
                //返回 config 对象
                return config;
            });

            //响应拦截器
            axios.interceptors.response.use(response => {
                //隐藏进度条
                NProgress.done();
                return response;
            }, error => {
                NProgress.done();
                //失败统一处理位置 ************************************************************
                console.log(error);
                return new Promise(() => {});
            });

            //axios 的默认配置
            axios.defaults.baseURL = 'http://api.xiaohigh.com:8090';
            axios.defaults.method = 'GET';
            axios.defaults.timeout = 2000;

            //获取 英雄的容器
            let heroList = document.querySelector(".hero-list");

            //获取所有的按钮
            let btns = document.querySelectorAll("button");

            //遍历按钮
            btns.forEach((item) => {
                //绑定事件
                item.onclick = async function () {
                    //发送请求
                    let { data } = await axios(
                        "/lol",
                        {
                            params: {
                                q: this.innerHTML,
                            },
                        }
                    );
                    //动态插入元素
                    handleData(data);
                };
            });

            //初始化函数
            async function init() {
                //发送请求, 获取英雄 // 解构赋值
                let { data } = await axios("/lol");
                //输出结果
                // console.log(data);
                handleData(data);
            }

            //调用初始化函数
            init();

            //统一处理响应结果
            function handleData(data) {
                //清空列表
                heroList.innerHTML = "";
                //创建元素
                data.forEach((item) => {
                    //创建 div 元素
                    let div = document.createElement("div");
                    //设置 class 属性
                    div.className = "item";
                    //创建 img 标签
                    let img = document.createElement("img");
                    //img 绑定单击事件
                    img.onclick = async function(){
                        //发送请求
                        let result = await axios.delete('/lol/' + item.id);
                        //移除当前的 item 元素
                        let div = this.parentNode;
                        //移除
                        heroList.removeChild(div);
                    }
                    //设置 img 的 src 属性
                    img.src = item.avatar;
                    //创建 h4 标签
                    let h4 = document.createElement("h4");
                    //设置 h4 的文本
                    h4.innerHTML = item.name;
                    //组装
                    div.appendChild(img);
                    div.appendChild(h4);
                    //插入
                    heroList.appendChild(div);
                });
            }
        </script>
    </body>
</html>
